<template>
  <div class="tree">
    <div id="cate-list">
      <div
        id="cate10"
        class="level parent0"
        :class="[`level${item.level}`, isExpand(item.pid) ? 'show' : '']"
        data-id="10" :style="{paddingLeft: `${50 * (item.level - 1)}px`}"
        v-for="item in list"
        :key="item.id"
        >
        <div class="cate-content">
          <template v-if="item.level > 2">
            <span class="tree3" v-for="(childItem, childIndex) in _computeTree3Len(item.pid, item.level)" :key="childItem+ 1000" :style="{left: `-${51 + childIndex * 50}px`}"></span>
          </template>
          <div class="weight">
            <span class="tree"></span>
            <span class="tree2" v-if="isLast(item.id)"></span>
            <input type="text" class="weight-input" :value="item.index" data-id="10" />
          </div>
          <div class="catename">
            <img :src="require(`./images/${item.expand ? 'sub' : 'add'}.png`)" class="expand" id="spread10" data-load="0" data-id="10" data-flag="1" @click="toggleShow(item.id)"/>
            <span class="cate-id">ID:{{item.id}}</span>
            <input type="text" class="name-input" :value="item.text" data-id="10" />
            <a
              class="add_menu ml-20"
              href="javascript:void(0);"
              data-url="https://admin.chenpe.com/menu/add?id=10&amp;trace=3rwq5s"
              data-id="10"
              @click="add(item.id)"
            >添加子分类{{checkParentsIsLast(baseList, item.pid)}}</a>
          </div>
          <div class="del-cate">
            <a
              href="javascript:void(0);"
              title="编辑"
              class="edit_menu"
              data-url="https://admin.chenpe.com/menu/edit?id=10&amp;trace=3rwq5s"
              data-cid="10"
              @click="edit(item.id)"
            >
              <i class="Hui-iconfont">编辑</i>
            </a>
            &nbsp;
            <a href="javascript:void(0);" title="删除" class="del_menu" data-name="陈皮内容" data-id="10" @click="del(item.id)">
              <i class="Hui-iconfont">删除</i>
            </a>
          </div>
        </div>
      </div>
    </div>
  
    <div class="dialog" v-show="layoutShow">
      <div class="dialog-item">
        名称:
        <input type="text" v-model="layoutData.text">
      </div>
      <div class="dialog-item">
        排序:
        <input type="text" v-model="layoutData.index">
      </div>
      <button @click="layoutData.isEdit ? editList : addList">确定</button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

function findArr(list, id) {
  let res = list.find(item => item.id == id)
  if (res) {
    return list
  } else {
    let arr = null
    list.find(item => {
      if (item.children) arr = findArr(item.children, id)
      return arr
    })
    return arr
  }
}
function normalizeList (list) {
  const tree = []
  let idx = 0
  function deep (data) {
    data.forEach((item, index) => {
      if (!item.pid) idx = index
      item.rootIndex = idx
      tree.push(item)
      if (item.children && item.children.length > 0) {
        deep(item.children)
      }
    });
  }
  deep(list)
  return tree
}
function findObj(list, id) {
  let obj = list.find(item => item.id === id)
  if (!obj) {
    list.find(item => {
      if (item.children && item.children.length > 0) {
        obj = findObj(item.children, id)
        return obj
      }
    })
  }
  return obj
}
function findIn(list, id) {
  if (list.find(item => item.id === id)) {
    return true
  } else {
    return list.some(item => {
      if (item.children && item.children.length > 0) {
        return findIn(item.children, id)
      }
    })
  }
}
function checkParentsIsLast(list, pid) {
  let num = 0
  deepCheck(list, pid)
  function deepCheck(list, id) {
    if (!id) return
    const _list = findArr(list, id) || []
    if (!_list.length) return
    const isLast  = _list[_list.length - 1].id == id
    const obj = _list.find(item => item.id == id)
    obj.pid && isLast && num++
    if (obj.pid) deepCheck(list, obj.pid)
  }
  return num
}

export default {
  components: {},
  data() {
    return {
      checkParentsIsLast,
      layoutData: {
        isEdit: false,
        id: '',
        text: '',
        index: ''
      },
      layoutShow: false,
      baseList: [
        {
          level: 1,       // 层级
          index: 1,       // 权重
          id: 1,          // id
          text: '1',      // 名称 
          expand: true,   // 子元素是否展开
          children: [
            {
              level: 2,
              index: 11,
              id: 11,
              pid: 1,     // 父id
              text: '11',
              expand: true,
              children: [
                {
                  level: 3,
                  index: 111,
                  id: 111,
                  pid: 11,
                  text: '111',
                  expand: true,
                  children: [
                    {
                      level: 4,
                      index: 1111,
                      id: 1111,
                      pid: 111,
                      text: '1111',
                      expand: true,
                      children: [
                        {
                          level: 5,
                          index: 11111,
                          id: 11111,
                          pid: 1111,
                          text: '11111',
                          expand: true,
                          children: [
                            {
                              level: 6,
                              index: 111111,
                              id: 111111,
                              pid: 11111,
                              text: '111111',
                              expand: true,
                            },
                            {
                              level: 6,
                              index: 111112,
                              id: 111112,
                              pid: 11111,
                              text: '111112',
                              expand: true,
                            }
                          ]
                        },
                        {
                          level: 5,
                          index: 11112,
                          id: 11112,
                          pid: 1111,
                          text: '11112',
                          expand: true,
                        }
                      ]
                    },
                    {
                      level: 4,
                      index: 1112,
                      id: 1112,
                      pid: 111,
                      text: '1112',
                      expand: true,
                    }
                  ]
                },
                {
                  level: 3,
                  index: 112,
                  id: 112,
                  pid: 11,
                  text: '112',
                  expand: true,
                },
              ]
            },
            {
              level: 2,
              index: 12,
              id: 12,
              pid: 1,
              text: '112',
              expand: true,
              children: [
                {
                  level: 3,
                  index: 121,
                  id: 121,
                  pid: 12,
                  text: '121',
                  expand: true,
                  children: [
                    {
                      level: 4,
                      index: 1211,
                      id: 1211,
                      pid: 121,
                      text: '1211',
                      expand: true,
                    },
                    {
                      level: 4,
                      index: 1212,
                      id: 1212,
                      pid: 121,
                      text: '1212',
                      expand: true,
                    }
                  ]
                },
                {
                  level: 3,
                  index: 122,
                  id: 122,
                  pid: 12,
                  text: '122',
                  expand: true,
                  children: [
                    {
                      level: 4,
                      index: 1221,
                      id: 1221,
                      pid: 122,
                      text: '1221',
                      expand: true,
                      children: [
                        {
                          level: 5,
                          index: 12211,
                          id: 12211,
                          pid: 1221,
                          text: '12211',
                          expand: true,
                        },
                      ]
                    },
                    {
                      level: 4,
                      index: 1222,
                      id: 1222,
                      pid: 122,
                      text: '1222',
                      expand: true,
                      children: [
                        {
                          level: 5,
                          index: 12221,
                          id: 12221,
                          pid: 1222,
                          text: '12221',
                          expand: true,
                        },
                      ]
                    }
                  ]
                },
              ]
            },
          ]
        },

        
      ],
      // list: [
      //   {
      //     level: 1,
      //     index: 1,
      //     id: 1,
      //     text: '1',
      //     show: true,
      //   },
      //   {
      //     level: 2,
      //     index: 11,
      //     id: 11,
      //     pid: 1,
      //     text: '11',
      //     show: true,
      //   },
      //   {
      //     level: 3,
      //     index: 111,
      //     id: 111,
      //     pid: 11,
      //     text: '111',
      //     show: true,
      //   },
      //   {
      //     level: 3,
      //     index: 112,
      //     id: 112,
      //     pid: 11,
      //     text: '112',
      //     show: true,
      //   },
      //   {
      //     level: 2,
      //     index: 12,
      //     id: 12,
      //     pid: 1,
      //     text: '112',
      //     show: true,
      //   },
      //   {
      //     level: 3,
      //     index: 121,
      //     id: 121,
      //     pid: 12,
      //     text: '121',
      //     show: true,
      //   },
      // ]
    };
  },
  created() {},
  computed: {
    list() {
      console.log(1111111111111);
      return normalizeList(this.baseList)
    }
  },
  mounted() {
    console.log('checkParentsIsLast(121)', checkParentsIsLast(this.baseList, 1221));
  },
  methods: {
    del(id) {
      const inList = findArr(this.baseList, id)
      const index = inList.findIndex(item => item.id == id)
      inList.splice(index, 1)
    },
    editList() {
      // 请求接口
    },
    edit(id) {
      this.layoutData.layoutData = true
      const currObj = findObj(this.baseList, id)
      this.layoutData = {
        isEdit: true,
        id,
        text: currObj.text,
        index: currObj.index,
      }
      this.layoutShow = true

    },
    isExpand(pid) {
      const obj = this.list.find(item => item.id == pid)
      return obj ? obj.expand : true
    },
    addList() {
      const {id: currId, text, index} = this.layoutData
      const currObj = findObj(this.baseList, currId)
      currObj.children = currObj.children || []
 
      const id = String(currObj.id) +  (currObj.children.length + 1)
      console.log('id', id);

      const obj = {
        level: currObj.level + 1,
        index,
        id,
        pid: currId,
        text,
        expand: true,
      }
      console.log('obj', obj, currObj);
      currObj.children.push(obj)
    },
    add(id) {
      this.layoutData.id = id
      this.layoutShow = true
    },
    findList(id) {
      const _list = this.baseList
      return findArr(_list, id)
    },
    isLast(id) {
      const _list = this.findList(id) || []
      const obj = _list[_list.length - 1] || {}
      return obj.id == id
    },
    // 是否属于每个根tree的最后一个children的子元素
    // inlast(pid) {
    //   const _list = findArr(this.baseList, pid) || []
    //   if(!_list.length) return false
    //   return _list[_list.length - 1].id == pid

    // },
    toggleShow(id) {
      const _list = this.findList(id)
      const obj = _list.find(item => item.id == id) || {}
      const expand = !obj.expand
      obj.expand = expand
      const arr = obj.children || []
      deepToggle(arr)
      function deepToggle(list) {
        if (!list || !list.length) return
        list.forEach(item => {
          // item.expand = false
          item.expand = expand
          if (item.children && item.children.length) deepToggle(item.children)
        })
      }
    },
    _computeTree3Len(pid, level) {
      // 在减2的基础上 向上层层寻找父级，如果父级是最后一个子元素则多减1
      return Math.max(0, level - 2 - checkParentsIsLast(this.baseList, pid))
    },
  },
};
</script>


<style scoped>
  .dialog{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px 10px rgba(0,0,0,.3);
  }
</style>
<style scoped>
.level {
  display: none;
}
.level.show{
  display: block;
}
.level:hover {
  background-color: #eee;
}
.level:hover .tree2 {
  border-left: 1px solid #eee;
}
.level1 {
  display: block;
  background: none;
}
.cate-content {
  border-left: 1px solid #a9a4a4;
  position: relative;
}
.level1 .cate-content {
  border-left: none;
}
.table {
  margin-top: 20px;
}
.cate-content .catename,
.cate-content .weight {
  float: left;
  margin-top: 7px;
}
.cate-content .del-cate {
  float: right;
  margin-top: 7px;
  margin-right: 4%;
}
ul li .cate-content {
  height: 78px;
  margin-right: 5%;
}
ul li .cate-content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.cate-content .tree {
  top: -14px;
  left: -26px;
  height: 24px;
  width: 24px;
  display: block;
  border-left: 1px solid #a9a4a4;
  border-bottom: 1px solid #a9a4a4;
  position: absolute;
}
.level1 .cate-content .tree,
.level1 .cate-content .tree2 {
  border: none;
}
.cate-content .tree2 {
  top: 10px;
  left: -26px;
  height: 22px;
  width: 24px;
  display: block;
  border-left: 1px solid #fff;
  border-top: 1px solid #a9a4a4;
  position: absolute;
}
.tree3 {
  position: absolute;
  height: 78px;
  border-left: 1px solid #a9a4a4;
}
.cate-content {
  height: 40px;
}
.catename {
  margin-left: 10%;
}
.catename .expand {
  width: 15px;
  height: 15px;
}
.catename .spread {
  cursor: pointer;
  border: 1px solid #a9a4a4;
}
.catename .add-subcate {
  margin-left: 100px;
}
.catename .add-subcate a {
  color: #333;
}
.weight {
  display: inline-block;
  position: relative;
  margin-left: 50px;
  left: -25px;
}
.catename input {
  width: 150px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px solid #c0c8cf;
  color: #3a3b40;
  font-size: 12px;
  background: #fff;
}
.weight input {
  width: 50px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px solid #c0c8cf;
  color: #3a3b40;
  font-size: 12px;
  background: #fff;
}
ul.first-ul {
  border: 0 none;
  margin-top: 25px;
}
.del-cate .edit {
  margin-right: 10px;
}
.cate-id {
  margin: 0 10px;
  min-width: 50px;
  display: inline-block;
  height: 26px;
  line-height: 26px;
}
.layui-form-switch {
  margin: 0;
}
</style>
